/* define color */
$blue: #2c8ef8;
$indigo: #727cf5;
$purple: #6b5eae;
$pink: #ff679b;
$red: #fa5c7c;
$orange: #fd7e14;
$yellow: #ffbc00;
$green: #0acf97;
$teal: #02a8b5;
$cyan: #39afd1;
$white: #fff;
$gray: #98a6ad;
$gray-dark: #343a40;
$primary: #727cf5;
$secondary: #6c757d;
$success: #0acf97;
$info: #39afd1;
$warning: #ffbc00;
$danger: #fa5c7c;
$light: #e3eaef;
$dark: #313a46;

body {
  max-height: 612px;
  // background-color: skyblue;
}

.game_start,
.game_main,
*{
  user-select: none;
}

.game_end {
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
}

.game_start, .game_end {
  display: none;
  padding-top: 200px;
  padding-bottom: 250px;
  background-color: skyblue;

  h1 {
    color: white;
    text-align: center;
    font-size: 50px;
  }

  button {
    padding: 15px;
    color: skyblue;
    background-color: #fff;
    display: block;
    margin: 0 auto;
    font-size: 24px;
    border-radius: 5px;
  }
}

.game_main {
  display: none;
  .main_head {
    height: 100px;

    .col-xs-6 {
      height: 100px;
      padding: 5px;
    }

    .level_num {
      height: 100%;
      background-color: $yellow;
      line-height: 90px;
      font-size: 40px;
      color: white;
      text-align: center;
      border-radius: 5px;
    }

    .text_detail {
      height: 100%;
      color: white;
      background-color: $yellow;
      padding-top: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      p{
          font-size: 12px;
      }
    }
  }

  .main_foot {
    height: 470px;
    padding-top: 15px;
    background-color: #eeeeee;

    .col-xs-3,
    .col-xs-6 {
      height: 90px;
      padding: 5px;
    }

    .num_box,
    .time_box {
      height: 100%;
      background-color: $blue;
      line-height: 83px;
      font-size: 50px;
      text-align: center;
      color: white;
    }
    .num_box{
      cursor: pointer;
    }
    .time_box{
      font-size: 80px;
      color: $green;
      background-color: transparent;
    }
  }
}

.game_start{
    display: block;
}

.target_numbers{
  text-indent: 1em;
}
.active{
  box-shadow: 0px 0px 19px 3px #3F51B5 inset;
}